<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<!--导航栏-->
		<pageLayout
			:barTitle="title"
			:isSearchNull="isSearchNull"
			:isOpen="isOpen"
			@rightClick="clickSearch">
		</pageLayout>
		<!--查询弹窗-->
		<up-popup :z-index="90" :show="isOpen" @close="closeSearch" mode="top">
			<scroll-view class="search" scroll-y="true" @touchmove.stop>
				<view class="search-form">
					<uni-forms ref="searchRef" :modelValue="searchModel" label-width="160rpx">
						<uni-forms-item label="区域">
							<uni-data-select
								v-model="searchModel.regionCode"
								placeholder="请选择区域"
								:localdata="setStore.allProvinceList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="客户姓名">
							<uni-easyinput v-model="searchModel.name" placeholder="请输入客户姓名" />
						</uni-forms-item>
						<uni-forms-item label="电话号码">
							<uni-easyinput v-model="searchModel.phone" placeholder="请输入电话号码" />
						</uni-forms-item>
						<uni-forms-item label="客户类别">
							<uni-data-select
								v-model="searchModel.wholesaler"
								placeholder="请选择客户类别"
								:localdata="wholesalerList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="工商号">
							<uni-easyinput v-model="searchModel.storeId" placeholder="请输入工商号" />
						</uni-forms-item>
						<uni-forms-item label="公司名称">
							<uni-easyinput v-model="searchModel.company" placeholder="请输入公司名称" />
						</uni-forms-item>
						<uni-forms-item label="开始时间">
							<uni-datetime-picker type="datetime" placeholder="请选择开始时间" v-model="searchModel.startTime"/>
						</uni-forms-item>
						<uni-forms-item label="结束时间">
							<uni-datetime-picker type="datetime" placeholder="请选择结束时间" v-model="searchModel.endTime"/>
						</uni-forms-item>
					</uni-forms>
					<view class="search-footer main-flex">
						<up-button
							class="search-footer-item"
							text="搜索"
							type="primary"
							@click="searchSubmit"
							icon="search"></up-button>
						<up-button
							class="search-footer-item"
							@click="resetSubmit"
							text="重置"></up-button>
					</view>
				</view>
			</scroll-view>
		</up-popup>
		<view class="content">
			<!--内容-->
			<view class="table">
				<ty-table
					:data="tableList"
					:columns="columns"
					:sortable="true"
					@row-click="rowClick"
					:cellClassName="() => 'table-cell'"
					:headerCellClassName="() => 'table-cell'"
					:rowClassName="() => 'table-row'"
					stripe
					border>
					<template v-slot:user="{ row }">
						<view class="table-td-cell">
							<!-- <view class="table-td-row">ID：<text class="table-td-text">{{row.id}}</text></view> -->
							<view class="table-td-row">区域：<text class="table-td-text">{{arrText(setStore.allProvinceList, row.regionCode)}}</text></view>
							<view class="table-td-row">姓名：<text class="table-td-text">{{row.name}}</text></view>
							<view class="table-td-row">电话：<text class="table-td-text">{{row.phone}}</text></view>
							<view class="table-td-row">类别：<uni-tag size="small" :text="arrText(wholesalerList, row.customerType)" /></view>
							<view class="table-td-row">区域：<text class="table-td-text">{{row.province}}</text></view>
						</view>
					</template>
					<template v-slot:company="{ row }">
						<view class="table-td-cell">
							<view class="table-td-row">公司：<text class="table-td-text">{{row.company}}</text></view>
							<view class="table-td-row">地址：<text class="table-td-text">{{row.addr}}</text></view>
							<view class="table-td-row">工商号：<text class="table-td-text">{{row.storeId}}</text></view>
							<view class="table-td-row">信用代码：<text class="table-td-text">{{row.companyCode}}</text></view>
							<view class="table-td-row main-flex">
								营业执照：
								<view class="table-td-row-img" @click.stop="previewImg(row.businessLicenseImg)">
									<up-image width="80rpx" bgColor="#ffffff" height="80rpx" :src="row.businessLicenseImg" :lazy-load="true"></up-image>
								</view>
							</view>
							<view class="table-td-row">
								执照验证：
								<uni-tag
								size="small"
								:type="row.extendFlag === 1 ? 'success' : row.extendFlag === 2 ? 'error' : ''"
								:text="arrText(extendFlagList, row.extendFlag)" />
							</view>
						</view>
					</template>
					<template v-slot:status="{ row }">
						<view class="table-td-cell">
							<view class="table-td-row">推广码：<text class="table-td-text">{{row.spreadCode}}</text></view>
							<view class="table-td-row">销售人员：<text class="table-td-text">{{row.salesmanName}}</text></view>
							<view class="table-td-row">
								资料审核：
								<uni-tag
									size="small"
									:type="row.examineFlag === 1 ? 'success' : row.examineFlag === 2 ? 'error' : ''"
									:text="arrText(examineFlagList, row.examineFlag)" />
							</view>
							<view class="table-td-row" v-if="row.examineFlag === 2">原因：<text class="table-td-text">{{row.remark}}</text></view>
							<view class="table-td-row">
								平台审核：
								<uni-tag
									size="small"
									:type="row.reviewFlag === 1 ? 'success' : row.reviewFlag === 2 ? 'error' : ''"
									:text="row.reviewFlag === 1 ? '审核通过' : row.reviewFlag === 2 ? '审核未过' : '未审核'" />
							</view>
							<view class="table-td-row">余额：<text class="table-td-text">{{row.balance}}</text></view>
							<view class="table-td-row">积分：<text class="table-td-text">{{row.integral}}</text></view>
						</view>
					</template>
					<template v-slot:empty>
						<view class="table-empty">
							<up-empty mode="data"/>
						</view>
					</template>
				</ty-table>
			</view>
			<!--分页-->
			<view class="pagination" v-show="total > 0">
				<ty-pagination
					:total="total"
					:pageSize="pageSize"
					:currentPage="pageNum"
					:pageSizes="[10, 20, 30, 50]"
					mode="simple"
					layout="first,prev,page,next,last"
					@sizeChange="sizeChange"
					@change="pageChange">
				</ty-pagination>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref, watch } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { customer, customerPassword } from "@/api/erp_api/customer"
import { isObjectEmptySimple, copyText, arrText, previewImg, getRecentDays } from '@/utils/ty.js';
import { wholesalerList, examineFlagList, extendFlagList } from '@/utils/config.js';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { timeFormat } from 'uview-plus'

	const userStore = useUserStore()
	const setStore = useSetStore()

	// 标题设置
	const title = ref('')
	onLoad((option) => {
		title.value = getTitle(userStore.menu)
		uni.setNavigationBarTitle({
			title: title.value 
		})
		uni.$on('refreshList', () => {
			getList()
		})
	})

	// 搜索相关
	const isSearchNull = ref(true)
	const isOpen =  ref(false)
	const clickSearch = (val) => {
		isOpen.value = val
	}
	const closeSearch = (val) => {
		isOpen.value = false
	}
	// 确认搜索
	const searchRef = ref(null)
	const searchModel = ref({
		regionCode: '',
		name: '',
		wholesaler: '',
		phone: '',
		storeId: '',
		startTime: `${getRecentDays(15)} 00:00:00`,
		endTime: `${timeFormat()} 23:59:59`,
		company: ''
	})
	const searchSubmit = () => {
		pageNum.value = 1
		tableList.value = []
		isOpen.value = false
		searchFirst()
	}
	// 重置搜索
	const resetSubmit = () => {
		// searchRef.value.resetFields()
		searchModel.value = {
			regionCode: '',
			name: '',
			wholesaler: '',
			phone: '',
			storeId: '',
			startTime: `${getRecentDays(15)} 00:00:00`,
			endTime: `${timeFormat()} 23:59:59`,
			company: ''
		}
		if (userStore.regionCode) {
			searchModel.value.regionCode = userStore.regionCode
		}
		isSearchNull.value = true
		isOpen.value = false
		searchFirst()
	}
	
	
	// 数据查询
	const pageNum = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const tableList = ref([])
	const isLoading = ref(false)
	
	// 表格头部
	const columns = ref([
		{ title: '客户信息', key: 'user' },
		{ title: '工商信息', key: 'company' },
		{ title: '其他', key: 'status' }
	])
	
	// 从第一页查询
	const searchFirst = () => {
		pageNum.value = 1
		tableList.value = []
		isSearchNull.value = isObjectEmptySimple(searchModel.value)
		getList()
	}
	//页数切换
	const pageChange = (page) => {
		pageNum.value = page
		getList()
	}
	//每页条数切换
	const sizeChange = (size) => {
		pageSize.value = size
		getList()
	}
	
	const getList = () => {
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value
		}
		if (searchModel.value.regionCode) {
			params.regionCode = searchModel.value.regionCode
		}
		if (searchModel.value.name) {
			params.name = searchModel.value.name
		}
		if (searchModel.value.wholesaler || searchModel.value.wholesaler === 0) {
			params.wholesaler = searchModel.value.wholesaler
		}
		if (searchModel.value.phone) {
			params.phone = searchModel.value.phone
		}
		if (searchModel.value.startTime) {
			params.startTime = searchModel.value.startTime
		}
		if (searchModel.value.endTime) {
			params.endTime = searchModel.value.endTime
		}
		if (searchModel.value.storeId) {
			params.storeId = searchModel.value.storeId
		}
		if (searchModel.value.company) {
			params.company = searchModel.value.company
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		customer(params).then(res => {
			tableList.value = res.rows || []
			total.value = res.total
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 点击行
	const rowClick = (row) => {
		uni.navigateTo({
			url: `/pages/customer/customerDetail?id=${row.id}`
		})
	}
	
	onMounted(async () => {
		if (userStore.regionCode) {
			searchModel.value.regionCode = userStore.regionCode
		}
		searchFirst()
	})
</script>

<style scoped>
</style>
